<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script type="text/javascript" src="echarts-plain-original.js"></script>
</head>
<body>
 <div id="main" style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>

<script type="text/javascript">

var myChart = echarts.init(document.getElementById('main'));


	option= {
	    title : {
	        text: '人物关系：乔布斯',
	        subtext: '数据来自人立方',
	        x:'right',
	        y:'bottom'
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: '{a} : {b}'
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    legend: {
	        x: 'left',
	        data:['家人','朋友']
	    },
	    series : [
	        {
	            type:'force',
	            name : "人物关系",
	            categories : [
	                {
	                    name: '人物'
	                },
	                {
	                    name: '家人'
	                },
	                {
	                    name:'朋友'
	                }
	            ],
	            itemStyle: {
	                normal: {
	                    label: {
	                        show: true,
	                        textStyle: {
	                            color: '#333'
	                        }
	                    },
	                    nodeStyle : {
	                        brushType : 'both',
	                        strokeColor : 'rgba(255,215,0,0.4)',
	                        lineWidth : 1
	                    }
	                },
	                emphasis: {
	                    label: {
	                        show: false
	                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
	                    },
	                    nodeStyle : {
	                        //r: 30
	                    },
	                    linkStyle : {}
	                }
	            },
	            useWorker: false,
	            minRadius : 15,
	            maxRadius : 25,
	            gravity: 1.1,
	            scaling: 1.1,
	            linkSymbol: 'arrow',
	            nodes:[
	                {category:0, name: '乔布斯', value : 10},
	                {category:1, name: '丽萨-乔布斯',value : 2},
	                {category:1, name: '保罗-乔布斯',value : 3},
	                {category:1, name: '克拉拉-乔布斯',value : 3},
	                {category:1, name: '劳伦-鲍威尔',value : 7},
	                {category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
	                {category:2, name: '奥巴马',value : 8},
	                {category:2, name: '比尔-盖茨',value : 9},
	                {category:2, name: '乔纳森-艾夫',value : 4},
	                {category:2, name: '蒂姆-库克',value : 4},
	                {category:2, name: '龙-韦恩',value : 1},
	            ],
	            links : [
	                {source : '丽萨-乔布斯', target : '乔布斯', weight : 1},
	                {source : '保罗-乔布斯', target : '乔布斯', weight : 2},
	                {source : '克拉拉-乔布斯', target : '乔布斯', weight : 1},
	                {source : '劳伦-鲍威尔', target : '乔布斯', weight : 2},
	                {source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 3},
	                {source : '奥巴马', target : '乔布斯', weight : 6},
	                {source : '比尔-盖茨', target : '乔布斯', weight : 6},
	                {source : '乔纳森-艾夫', target : '乔布斯', weight : 1},
	                {source : '蒂姆-库克', target : '乔布斯', weight : 1},
	                {source : '龙-韦恩', target : '乔布斯', weight : 1},
	                {source : '克拉拉-乔布斯', target : '保罗-乔布斯', weight : 1},
	                {source : '奥巴马', target : '保罗-乔布斯', weight : 1},
	                {source : '奥巴马', target : '克拉拉-乔布斯', weight : 1},
	                {source : '奥巴马', target : '劳伦-鲍威尔', weight : 1},
	                {source : '奥巴马', target : '史蒂夫-沃兹尼艾克', weight : 1},
	                {source : '比尔-盖茨', target : '奥巴马', weight : 6},
	                {source : '比尔-盖茨', target : '克拉拉-乔布斯', weight : 1},
	                {source : '蒂姆-库克', target : '奥巴马', weight : 1}
	            ]
	        }
	    ]
	};
	myChart.setOption(option); 
/* 	function focus(param) {
	    var data = param.data;
	    var links = option.series[0].links;
	    var nodes = option.series[0].nodes;
	    if (
	        data.source !== undefined
	        && data.target !== undefined
	    ) { //点击的是边
	        var sourceNode = nodes[data.source];
	        var targetNode = nodes[data.target];
	        console.log("选中了边 " + sourceNode.name + ' -> ' + targetNode.name + ' (' + data.weight + ')');
	    } else { // 点击的是点
	        console.log("选中了" + data.name + '(' + data.value + ')');
	    }
	    console.log(param);
	}
	myChart.on(ecConfig.EVENT.CLICK, focus) */

	                    

</script>
</body>
</html>